<template>
  <div>
    <!-- {{detailCollectState}} -->
    <van-sticky>
      <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="detailsContents">
      <div class="bigimg">
        <img v-lazy="detailsData.image1" alt />
      </div>
      <div class="detailsInfo">
        <p>{{detailsData.name}}</p>
        <p>
          价格 :
          <span>{{ detailsData.presentPrice | rmb }}</span>元
        </p>
      </div>
      <van-tabs line-width="160px" scrollspy color="#ee0a24" sticky offset-top="80px">
        <van-tab title="商品详情">
          <div class="detailAllImg" v-html="detailsData.detail"></div>
        </van-tab>
        <van-tab title="评论">
          <ul>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
            <li>好评123</li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />

      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartsGoodsAmount" to="/shopcar" />

      <van-goods-action-icon
        icon="star"
        :text="collectionText"
        :color="collectionColor"
        @click="collection(collectionText,collectionColor)"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="buygoods()" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetailGoodsInfo } from "../../commonApi/request";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  name: "goodsDetail",
  props: ["id"],
  data() {
    return {
      detailsData: "",
      cartsGoodsAmount: 0,
      collectionText: "收藏",
      collectionColor: "#ccc",
      collectInfo:{}
    };
  },
  computed:{
    // detailCollectState(){
    //   // return Boolean(this.collectInfo[this.detailsData.id])
    //   // return this.detailsData.id
    //   if(this.collectInfo[this.detailsData.id]){
    //     return {

    //     }
    //   }
    // }
  },
  methods: {
    async getGoodsDetail() {
      let _self = this;
      let { data } = await getDetailGoodsInfo(_self.id);
      _self.detailsData = data.data;
      console.log(data.data);
       console.log(this.collectInfo)
      console.log(this.detailsData)
      if(this.collectInfo[this.detailsData.id]){
        _self.collectionText = "已收藏";
        _self.collectionColor = "#ff5000";
      }
    },
    // 收藏按钮
    // collection(txt, color) {
    //   let _self = this;
    //   if (txt == "已收藏" && color == "#ff5000") {
    //     _self.collectionText = "收藏";
    //     _self.collectionColor = "#ccc";
    //     Toast({
    //       message: "取消收藏宝贝成功",
    //       icon: "like-o"
    //     });
    //   } else {
    //     _self.collectionText = "已收藏";
    //     _self.collectionColor = "#ff5000";
    //     Toast({
    //       message: "收藏宝贝成功",
    //       icon: "like"
    //     });
    //   }
    // },
    collection(txt, color) {
      let _self = this;
      if (txt == "已收藏" && color == "#ff5000") {
        _self.collectionText = "收藏";
        _self.collectionColor = "#ccc";
        Toast({
          message: "取消收藏宝贝成功",
          icon: "like-o"
        });
      } else {
        _self.collectionText = "已收藏";
        _self.collectionColor = "#ff5000";
        Toast({
          message: "收藏宝贝成功",
          icon: "like"
        });
      }
      _self.$store.dispatch("asynAddOrCancelCollection", {
        id: _self.detailsData.id,
        image: _self.detailsData.pictureComperssPath,
        presentPrice: _self.detailsData.presentPrice,
        name: _self.detailsData.name,
        collectors:_self.detailsData.oriPrice
      });
    },
    cartsData() {
      this.$store.dispatch("asynShowCart");
      this.cartsGoodsAmount = Object.keys(this.$store.state.carts).length;
    },
    showCollect(){
      this.$store.dispatch("asynshowCollection")
      this.collectInfo = this.$store.state.collections
    },
    onClickLeft() {
      this.$router.back();
    },
    buygoods() {
      let _self = this;
      Dialog.confirm({
        // title: "标题",
        message: "确认加购  [" + _self.detailsData.name + "]   吗？"
      })
        .then(() => {
          _self.$store.dispatch("asynAddCart", {
            id: _self.detailsData.id,
            image: _self.detailsData.pictureComperssPath,
            presentPrice: _self.detailsData.presentPrice,
            name: _self.detailsData.name
          });
          Toast.success("加购成功！");
          _self.cartsData();
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  created() {
    
    this.showCollect()
    this.getGoodsDetail();
    
  },
  mounted() {
    this.cartsData();
  }
};
</script>

<style>
.detailsContents {
  background-color: #f0f0f0;
  padding-bottom: 50px;
}
.detailsContents .bigimg {
  width: 375px;
  padding-bottom: 6px;
}
.detailsContents .bigimg img {
  width: 100%;
}
.detailsContents .detailsInfo {
  color: #000;
  font-size: 18px;
  background-color: white;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.detailsContents .van-tab__text--ellipsis {
  font-size: 16px !important;
  font-weight: bold !important;
}
.detailsContents .van-tab--active {
  color: #ee0a24;
}

.van-nav-bar__content {
  border-bottom: 1px solid #ccc;
}
</style>